<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram of Relative Motion</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="420"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw an arrow
        function drawArrow(ctx, fromX, fromY, toX, toY, headLength = 10) {
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);
            
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
            
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }
        
        // Helper function to draw just the arrowhead
        function drawArrowHead(ctx, fromX, fromY, toX, toY, headLength = 10) {
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);
            
            ctx.beginPath();
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // --- Start Drawing ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1.5;
        
        // Define coordinates and dimensions
        const o = { x: 60, y: 360 };
        const o_prime = { x: 140, y: 360 };
        const R = 100;
        const circleCenter = { x: o_prime.x + R, y: o_prime.y - R }; // (240, 260)

        // Draw S frame
        ctx.font = 'italic 22px Times New Roman';
        drawArrow(ctx, o.x, o.y, 550, o.y); // x-axis
        drawArrow(ctx, o.x, o.y, o.x, 50);  // y-axis
        ctx.fillText('O', o.x - 25, o.y + 10);
        ctx.fillText('x', 555, o.y + 5);
        ctx.fillText('y', o.x - 10, 40);
        ctx.font = '22px KaiTi'; // Font for Chinese characters
        ctx.fillText('S系', o.x + 20, 150);

        // Draw S' frame
        ctx.font = 'italic 22px Times New Roman';
        drawArrow(ctx, o_prime.x, o.y, o_prime.x, 50); // y'-axis
        ctx.fillText("O'", o_prime.x - 10, o.y + 20);
        ctx.fillText("x'", 555, o.y + 25);
        ctx.fillText("y'", o_prime.x - 10, 40);
        ctx.font = '22px KaiTi';
        ctx.fillText("S'系", o_prime.x + 20, 150);

        // Draw the circle and its guides
        // Dashed lines
        ctx.save();
        ctx.setLineDash([4, 4]);
        ctx.lineWidth = 1;
        // Horizontal dashed line from y'-axis to center
        ctx.beginPath();
        ctx.moveTo(o_prime.x, circleCenter.y);
        ctx.lineTo(circleCenter.x, circleCenter.y);
        ctx.stroke();
        // Vertical dashed line from x'-axis to center
        ctx.beginPath();
        ctx.moveTo(circleCenter.x, o_prime.y);
        ctx.lineTo(circleCenter.x, circleCenter.y);
        ctx.stroke();
        // Vertical dashed line from center to top of circle
        ctx.beginPath();
        ctx.moveTo(circleCenter.x, circleCenter.y);
        ctx.lineTo(circleCenter.x, circleCenter.y - R);
        ctx.stroke();
        ctx.restore();

        // Circle
        ctx.beginPath();
        ctx.arc(circleCenter.x, circleCenter.y, R, 0, 2 * Math.PI);
        ctx.stroke();

        // Center point
        ctx.beginPath();
        ctx.arc(circleCenter.x, circleCenter.y, 3, 0, 2 * Math.PI);
        ctx.fill();

        // Labels for R
        ctx.font = 'italic 22px Times New Roman';
        ctx.fillText('R', o_prime.x - 25, circleCenter.y + 5);
        ctx.fillText('R', circleCenter.x - 10, o_prime.y + 20);

        // Draw particles P1 and P2
        const p1_pos = { x: circleCenter.x - 8, y: circleCenter.y - R };
        const p2_pos = { x: circleCenter.x + 8, y: circleCenter.y - R };
        ctx.beginPath();
        ctx.arc(p1_pos.x, p1_pos.y, 3.5, 0, 2 * Math.PI);
        ctx.fill();
        ctx.beginPath();
        ctx.arc(p2_pos.x, p2_pos.y, 3.5, 0, 2 * Math.PI);
        ctx.fill();

        // Labels for P1 and P2 with subscripts
        ctx.font = 'italic 24px Times New Roman';
        const p1_label_pos = {x: circleCenter.x - 50, y: circleCenter.y - R + 40};
        const p2_label_pos = {x: circleCenter.x + 30, y: circleCenter.y - R + 40};
        ctx.fillText('P', p1_label_pos.x, p1_label_pos.y);
        ctx.fillText('P', p2_label_pos.x, p2_label_pos.y);
        ctx.font = 'italic 18px Times New Roman';
        ctx.fillText('1', p1_label_pos.x + 12, p1_label_pos.y + 5);
        ctx.fillText('2', p2_label_pos.x + 12, p2_label_pos.y + 5);

        // Draw velocity arrows for particles
        ctx.font = 'italic 22px Times New Roman';
        const vel_arrow_y = circleCenter.y - R - 25;
        const vel_arrow_left_x = circleCenter.x - R;
        const vel_arrow_right_x = circleCenter.x + R;
        
        ctx.beginPath();
        ctx.moveTo(vel_arrow_left_x, vel_arrow_y);
        ctx.lineTo(vel_arrow_right_x, vel_arrow_y);
        ctx.stroke();
        drawArrowHead(ctx, vel_arrow_right_x, vel_arrow_y, vel_arrow_left_x, vel_arrow_y);
        drawArrowHead(ctx, vel_arrow_left_x, vel_arrow_y, vel_arrow_right_x, vel_arrow_y);
        
        ctx.fillText('3v', circleCenter.x - R/2 - 15, vel_arrow_y - 10);
        ctx.fillText('v', circleCenter.x + R/2 - 10, vel_arrow_y - 10);

        // Draw relative velocity arrow for S' frame
        const v_arrow_y = 330;
        const v_arrow_start_x = 400;
        const v_arrow_end_x = 480;
        drawArrow(ctx, v_arrow_start_x, v_arrow_y, v_arrow_end_x, v_arrow_y);
        ctx.fillText('v', (v_arrow_start_x + v_arrow_end_x) / 2 - 5, v_arrow_y - 10);

    </script>
</body>
</html>